<!-- 选择地址 -->
<template>
  <view class="addressSelection">
    <u-popup
        v-model="propsShow"
        safe-area-inset-bottom
        mask-close-able
        mode="bottom"
        @close="closeProps"
    >
      <view class="disFlx disFlxJCSB p-20">
        <view class="fw4" v-if="!activeParams.provinceName">请选择</view>
        <view class="fw4 disFlx" v-else>
          <view class="cellBox" @click="reselection(0)" v-if="activeParams.provinceName">{{activeParams.provinceName}}</view>
          <view class="ml-20 cellBox" @click="reselection(1)" v-if="activeParams.cityName">{{activeParams.cityName}}</view>
          <view class="ml-20 cellBox" @click="reselection(2)" v-if="activeParams.countyName">{{activeParams.countyName}}</view>
        </view>
        <view @click="propsShow = false">
          <image src="https://image.qqpyyds.com/mpAppImg/icon/error2_icon.png" class="close-icon" />
        </view>
      </view>
      <view class="fz12 color9 pl-20 pr-20 bgf8 height70" v-if="currentLeve===0">请选择省份、地区</view>
      <view class="fz12 color9 pl-20 pr-20 bgf8 height70" v-if="currentLeve===1">请选择城市</view>
      <view class="fz12 color9 pl-20 pr-20 bgf8 height70" v-if="currentLeve===2">请选择区、县</view>
      <!-- 地区列表 -->
      <scroll-view :style="currentLeve===3?'height:870rpx;':'height:800rpx;'" class="bgf8" :scroll-y="true">
        <view v-for="(item,index) in pickList" :key="index" class="disFlx forBox" @click="_activeFn(item)">
          <view class="itemInitial color6">{{index === 0 || item.initial !== pickList[index-1].initial?item.initial:""}}</view>
          <view :class="(item.id === activeParams.provinceId || item.id === activeParams.cityId || item.id === activeParams.countyId) ? 'themeFontColor' : ''">{{item.name}}</view>
        </view>
      </scroll-view>
    </u-popup>
  </view>
</template>

<script>
import { chineseToInitials,chineseToPinYin } from "./transition";
import request from '@/utils/request/index.js'

export default {
  data() {
    return {
      propsShow: false,
      pickList: [],
      currentLeve: 0, //当前层级 1省，2市，3区、县
      activeParams: {}
    };
  },
  props: {
    show: {
      type: Boolean,
      default: false,
    },
    defaultObj:{
      type: Object,
      default: {
        provinceId: "", // 省ID
        provinceName: "", // 省name
        cityId: "", // 市ID
        cityName: "", // 市name
        countyId: "", // 区ID
        countyName: "", // 区name
      }
    }
  },
  watch: {
    show(val) {
      this.propsShow = val
      if(val){
        this.activeParams = JSON.parse(JSON.stringify(this.defaultObj))
        this.currentLeve = 0
        this.getAreaList(0);
      }
    }
  },
  methods: {
    // 获取下级地区
    async getAreaList(id) {
      const { data } = await request({url: `/store/mini/area/list/${id}`,method: 'GET'})

      // const { data } = await this.$api.USER.areaListChildren(id);
      if(this.currentLeve === 2 && !data.length){
        let params = JSON.parse(JSON.stringify(this.activeParams))
        this.$emit('config',params) // 确认地区选择
        this.propsShow = false // 关闭选择器
      }
      for (let index = 0; index < data.length; index++) {
        this.$set(data[index],'initial',chineseToInitials(chineseToPinYin(data[index].name)))
      }
      // 按首字母排序
      data.sort((a, b)=> a.initial.localeCompare(b.initial))
      this.pickList = data
    },
    // 选择省市区
    _activeFn(item){
      this.currentLeve = item.level
      if(item.level === 1){
        this.activeParams.provinceId = item.id
        this.activeParams.provinceName = item.name
        this.activeParams.cityId = ""
        this.activeParams.cityName = ""
        this.activeParams.countyId = ""
        this.activeParams.countyName = "";
        this.getAreaList(item.id)
      }else if(item.level === 2){
        this.activeParams.cityId = item.id
        this.activeParams.cityName = item.name
        this.activeParams.countyId = ""
        this.activeParams.countyName = ""
        this.getAreaList(item.id)
      }else{
        this.activeParams.countyId = item.id
        this.activeParams.countyName = item.name
        let params = JSON.parse(JSON.stringify(this.activeParams))
        this.$emit('config',params) // 确认地区选择
        this.propsShow = false // 关闭选择器
      }
    },
    // 重新选择
    reselection(leve){
      this.currentLeve = leve
      if(this.currentLeve === 0){
        this.activeParams.cityId = ''
        this.activeParams.cityName = ''
        this.activeParams.countyId = ""
        this.activeParams.countyName = ""
        this.getAreaList(0)
      }else if(this.currentLeve === 1){
        this.activeParams.countyId = ""
        this.activeParams.countyName = ""
        this.getAreaList(this.activeParams.provinceId)
      }else if(this.currentLeve === 2){
        this.getAreaList(this.activeParams.cityId || this.activeParams.provinceId)
      }
    },
    // 关闭地区选择
    closeProps(){
      this.currentLeve = 0
      Object.assign(this.$data.activeParams, this.$options.data().activeParams)
      this.$emit('close')
    }
  },
};
</script>
<style lang='scss'>
.addressSelection{
  //width: 100%;
  //height: 240rpx;
  .addressSelection-ios {
    padding-bottom: 40rpx;
  }
  .disFlx{
    display: flex;
  }
  .disFlxJCSB{
    justify-content: space-between;
  }
  .p-20{
    padding: 40rpx;
  }
  .fw4{
    font-weight: 400;
  }
  .ml-20{
    margin-left: 40rpx;
  }
  .fz20{
    font-size: 40rpx;
  }
  .fz12{
    font-size: 24rpx;
  }
  .color9{
    color: #999;
  }
  .pl-20{
    padding-left: 40rpx;
  }
  .pr-20{
    padding-right: 40rpx;
  }
  .color6{
    color: #666;
  }
  .forBox{
    padding: 10rpx 20rpx;
    .itemInitial{
      width: 40rpx;
    }
  }
  .bgf8{
    background: #F8F8F8;
  }
  .height70{
    line-height: 70rpx;
    height: 70rpx;
  }
  .cellBox{
    color: #333;
    font-weight: 500;
    border-bottom: solid 2px $themeColor;
  }
  .close-icon {
    width: 30rpx;
    height: 30rpx;
  }
}
</style>